<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button>1</button>
    <button>2</button>
    <button>3</button>

    <script>

        // var     预编译：var声明的变量会提升再最前面，具名函数会提升到最前面
        // let
        // const

        // let 和 const 是es6提出的新的声明变量的方式
        //   声明的变量没有预编译  --- 必须先声明后使用
        //   在同一个作用域下，变量名不允许重复
        //   是块级作用域  {}



        // console.log(a);  // 报错
        // const a = 1 ;


        // let b = 1 ;


        // function fn() {
        //     let b = 2 ;
        //     console.log(b);
        // }

        // fn()


        // {
        //     var m = 1 ;   // 全局变量
        //     let a = 1;   // 块级变量
        //     console.log(a);

        // }

        // console.log(m);  // 1
        // console.log(a);   // 报错


        // let v = 2;
        // console.log(v);



        // for(var i = 0 ; i < 10 ; i++) {
        //     setTimeout(function() {
        //         console.log(i);
        //     })
        // }



        // let i = 0;
        // while(i < 10) {
        //     setTimeout(function(){
        //         console.log(i);   // 10个10
        //     })
        //     i++ ;
        // }







        // for(let i = 0 ; i < 10 ; i++) {
        //     setTimeout(function(){
        //         console.log(i);  // 0-9
        //     })
        // }

        // console.log(i);   // i 在循环内部生效


        // {
        //     let i = 0 ;
        //     setTimeout(function(){
        //         console.log(i);
        //     })
        // }

        // {
        //     let i = 1 ;
        //     setTimeout(function(){
        //         console.log(i);
        //     })
        // }


        // {
        //     let i = 2 ;
        //     setTimeout(function(){
        //         console.log(i);
        //     })
        // }


        let oBtns = document.querySelectorAll('button');
        for (let i = 0; i < oBtns.length; i++) {
            oBtns[i].onclick = function () {
                console.log(i);
            }
        }

    </script>

</body>

</html>